<route>
  {
    style: {
      navigationBarTitleText: '面试报告',
    }
  }
</route>

<script setup lang="ts">
import { getInterviewReportDetailAPI } from '@/api/interview'
import { InterviewReportItem } from '@/types/interview'

const statusTypes = ref([
  {
    id: 1,
    label: '优秀',
    color: '#47A2FF',
    backgroundColor: '#ECF5FF',
  },
  {
    id: 2,
    label: '良好',
    color: '#52c41a',
    backgroundColor: 'rgba(82, 196, 26, 0.1)',
  },
  {
    id: 3,
    label: '及格',
    color: '#ECB564',
    backgroundColor: '#FDF6EC',
  },
  {
    id: 4,
    label: '不及格',
    color: '#FF5656',
    backgroundColor: '#FFECEC',
  }
])

// 获取路由参数
const query = defineProps<{
  id: string
}>()

// 报告详情数据
const reportDetail = ref<InterviewReportItem>()

const getReportDetail = async () => {
  // 调用接口获取报告详情数据
  const res = await getInterviewReportDetailAPI(query.id)
  reportDetail.value = res.data
}

// 页面加载
onLoad(() => {
  getReportDetail()
})

const scoreStatus = computed(() => {
  if (reportDetail.value?.score) {
    if (reportDetail.value.score >= 90) {
      return statusTypes.value[0]
    } else if (reportDetail.value.score >= 80) {
      return statusTypes.value[1]
    } else if (reportDetail.value.score >= 60) {
      return statusTypes.value[2]
    } else {
      return statusTypes.value[3]
    }
  }
})
</script>

<template>
  <view class="report-container">
    <!-- 职位信息 -->
    <view class="position-info">
      <text class="title">{{ reportDetail?.position }}</text>
      <text class="time">{{ reportDetail?.createTime }}</text>
    </view>

    <!-- 评分展示 -->
    <view class="score-section">
      <view style="display: flex;align-items: center;">
        <view class="score-circle">
          <text class="score">{{ reportDetail?.score }}</text>
        </view>
        <text class="total">/100</text>
      </view>
      <text class="status" :style="{color: scoreStatus?.color, background: scoreStatus?.backgroundColor}">{{ scoreStatus?.label }}</text>
    </view>

    <!-- 综合评价 -->
    <view class="evaluation-section">
      <text class="section-title">综合评价</text>
      <text class="content">{{ reportDetail?.evaluate }}</text>
    </view>

    <!-- 亮点 -->
    <view class="highlight-section">
      <view class="section-header">
        <view class="icon-wrapper success">
          <i class="iconfont icon-success-fill"></i>
        </view>
        <text class="title">亮点</text>
      </view>
      <view class="point-list">
        <text class="point">• {{ reportDetail?.highlight }}</text>
        <!-- <text class="point">• 有大型项目管理经验</text>
        <text class="point">• 沟通表达能力准确</text> -->
      </view>
    </view>

    <!-- 需要提升 -->
    <view class="improve-section">
      <view class="section-header">
        <view class="icon-wrapper warning">
          <i class="iconfont icon-warning-filling"></i>
        </view>
        <text class="title">需要提升</text>
      </view>
      <view class="point-list">
        <text class="point">• {{ reportDetail?.deficiency }}</text>
      </view>
    </view>

    <!-- 建议 -->
    <view class="suggestion-section">
      <view class="section-header">
        <view class="icon-wrapper info">
          <i class="iconfont icon-suggestion"></i>
        </view>
        <text class="title">建议</text>
      </view>
      <view class="point-list">
        <text class="point">• {{ reportDetail?.suggestion }}</text>
      </view>
    </view>

    <!-- 报告生成时间 -->
    <view class="report-time">
      <text>报告生成时间：{{ reportDetail?.createTime }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.report-container {
  padding: 32rpx;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.position-info {
  margin-bottom: 40rpx;
  .title {
    display: block;
    font-size: 40rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
  }
  .time {
    font-size: 28rpx;
    color: #999;
  }
}

.score-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40rpx;

  .score-circle {
    width: 128rpx;
    height: 128rpx;
    background: linear-gradient(to bottom, #2b6de5, #5b8ff9);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;

    .score {
      font-size: 48rpx;
      color: #ffffff;
      font-weight: 600;
    }

    .total {
      font-size: 24rpx;
      color: #4b5563;
    }
  }

  .status {
    font-size: 28rpx;
    // color: #52c41a;
    // background: rgba(82, 196, 26, 0.1);
    padding: 8rpx 24rpx;
    border-radius: 32rpx;
  }
}

.evaluation-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
  }

  .content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  .icon-wrapper {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;

    &.success {
      background: rgba(82, 196, 26, 0.1);
      color: #52c41a;
    }

    &.warning {
      background: rgba(250, 173, 20, 0.1);
      color: #faad14;
    }

    &.info {
      background: rgba(24, 144, 255, 0.1);
      color: #1890ff;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
}

.highlight-section,
.improve-section,
.suggestion-section {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.point-list {
  .point {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    display: block;
    margin-bottom: 12rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.report-time {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 40rpx;
}
</style>
